<script lang="ts" setup>
import { getTourismFn, searchFn } from '@/api/home';
import { onMounted, ref } from 'vue';

const searchValue = ref('')
interface iTourismItem {
    id: number;
    img: string;
    proname: string;
    number: number;
    address: string;
}

const tourism = ref<iTourismItem[]>([]);

onMounted(() => {
    getTourismFn().then(res => {
        tourism.value = res.data.data.data
    })

});

function searchChange() {
    searchFn({
        proname: searchValue.value
    }).then(res => {
        tourism.value = res.data.data.data
    })
}

</script>




<template>
    <div class="tourism">
        <header class="tourism-header">
            <div class="back" @click="$router.back()" style="margin-left:15px; margin-top: 30px;">
                <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2340" width="18" height="18">
                    <path
                        d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                        fill="" p-id="2341"></path>
                </svg>
                <span style="font-size: 18px; color: #000; margin-left: 120px;">主题旅游</span>
            </div>
            <van-search shape="round" background="rgba(2, 167, 240,0)" placeholder="搜目的地/景点"
                v-model:model-value="searchValue" @update:model-value="searchChange"></van-search>

        </header>

        <div style="margin-top: 100px;">
            <main class="tourism-content" v-for="item in tourism" :key="item.id"
                @click="$router.push('/tourism/tourismdetail')">
                <div class="left">
                    <van-image :src="item.img"></van-image>
                </div>
                <div class="right">
                    <p style="color: #333;font-size: 16px;font-weight: bold;">{{ item.proname }}</p>
                    <p><span style="color: #666666;">5A</span></p>
                    <p style="color: #666666;"><span style="margin-right: 10px;">4.6分</span><span>{{ item.number
                            }}人评价</span></p>
                    <p style="color: #666666;">距离您{{ item.address }}</p>
                    <p style="color: #6799F9;"><span>可订明日</span><span style="margin-left: 10px;">随时退</span></p>
                </div>
                <span style="position: absolute;top: 120px;right: 10px;">免费预约</span>
            </main>
        </div>
    </div>
</template>

<style scoped lang="scss">
.tourism-header {
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 99;
    background-color: white;
}

.tourism-content {
    width: 90%;
    display: flex;
    margin: 10px auto;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 5px;
    border-radius: 10px;

    .left {

        .van-image {
            width: 135px;
        }
    }

    .right {
        margin-left: 10px;
        position: absolute;
        border-bottom: 20px;
        left: 140px;
        bottom: 0;

    }
}
</style>